import React, { Component, PropTypes } from 'react';
import { Row, Col, Popover, Spin } from 'antd';
import {connect} from 'react-redux'
import 'styles/components/info.scss'

class Info extends Component {

  state = {
    size: 8
  };

  componentDidMount = () => {
    window.addEventListener('resize', this.handleSize)
    this.handleSize();
  };

  componentWillUnmount = () => {
    window.removeEventListener('resize', this.handleSize)
  };

  handleSize = () => {
    let size = 12;
    if (window.innerWidth >= 992 && window.innerWidth < 1600) {
      size = 8;
    }
    if (window.innerWidth >= 1600) {
      size = 6;
    }
    size !== this.state.size && this.setState({ size });
  };

  getObjectValue = (key, object) => {
    return key.split('.').reduce((iter, val) => {
      if(iter && typeof iter === 'object' && val in iter) {
        iter = iter[val];
      } else {
        iter = '';
      }
      return iter;
    }, object);
  };

  getRowIndex = (deps, size) => {
    let result = [], row = [], rowSpan = 0;
    deps.forEach((item, index) => {
      const { span = size } = item;
      if (rowSpan + span <= 24) {
        row.push(item);
        rowSpan += span;
      } else {
        result.push(row);
        row = [item];
        rowSpan = span;
      }
      if (index === deps.length - 1) {
        result.push(row);
      }
    });
    return result;
  };

  memoizedSqrt = this.getRowIndex.memoize();

  getCol = rowItem => {
    let layout = {
      xs: { span: 12 },
      sm: { span: 12 },
      md: { span: 12 },
      lg: { span: 8 },
      xl: { span: 8 },
      xxl: { span: 6 }
    };
    const { dataSource, language, paragraph } = this.props;
    let tag = paragraph ? '-paragraph' : '';
    return (
      <div style={{ width: '100%' }}>
        {rowItem.map((attr, index) => {
          const { span, className = '', render = text => text, title, dataIndex, colon = true, widthFix = true, isDefaultPop = true } = attr;
          const content = render(this.getObjectValue(dataIndex, dataSource), dataSource, index);
          let _layout = span ? {} : layout;
          return <Col
            key={dataIndex}
            className={this.classNames([`info${tag}-item`, className])}
            span={span}
            {..._layout}
          >
            {
              widthFix ? (
                  <span className={`info${tag}-item-label ${language.code === "zh_cn" ? 'normal-width' : 'lg-width'}`}>
                      {title}
                    </span>
                ) :
                title + (colon ? `： ` : '')
            }
            {(isDefaultPop && !paragraph) ? (
              <Popover content={content} placement='topLeft'>
                {
                  widthFix ? (
                      <span className={`info${tag}-item-field ${language.code === "zh_cn" ? 'normal-width' : 'lg-width'}`}>
                        {content}
                      </span>
                    ) :
                    content
                }
              </Popover>
            ) : (
              <span>
                {
                  widthFix ? (
                      <span className={`info${tag}-item-field ${language.code === "zh_cn" ? 'normal-width' : 'lg-width'}`}>
                        {content}
                      </span>
                    ) :
                    content
                }
              </span>
            )}
          </Col>
        })}
      </div>
    );
  };

  render() {
    const { attributes, children, loading, paragraph } = this.props;
    let tag = paragraph ? '-paragraph' : '';
    return (
      <Spin spinning={loading}>
        <div className={`${this.props.className} info${tag}`}>
          <div className={`info${tag}-operate`}>
            {children}
          </div>
          {this.props.title && <div className={`info${tag}-title`}>{this.props.title}</div>}
          {
            this.memoizedSqrt(attributes, this.state.size).map(rowItem => (
              <Row type="flex" gutter={20} className={`info${tag}-row`}>
                {this.getCol(rowItem)}
              </Row>
            ))
          }
        </div>
      </Spin>
    );
  }

  static propTypes = {
    title: PropTypes.any,
    dataSource: PropTypes.object,
    attributes: PropTypes.array,
    loading: PropTypes.bool,
    paragraph: PropTypes.bool
  };

  static defaultProps = {
    className: '',
    loading: false,
    paragraph: false
  };

}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(Info);
